<template>
  <div class="count-page">
     <van-nav-bar
     left-arrow
      @click-left="$router.back()"
      fixed
      border
      title="热门技术"
    ></van-nav-bar>
     <van-button @click="onShow" type="primary" color="#FF7D00" size="small">前端</van-button>
     <van-button @click="onShow" type="primary" color="#00B42A " size="small">区块链</van-button>
     <van-button @click="onShow" type="primary" color="#FF7D00" size="small">后端</van-button>
     <van-button @click="onShow" type="primary" color="#4080FF " size="small">C++</van-button>
     <van-button @click="onShow" type="primary" color="#FF7D00" size="small">CSS</van-button>
     <van-button @click="onShow" type="primary" color="#4080FF " size="small">数据库</van-button>
     <van-button @click="onShow" type="primary" color="#4080FF " size="small">面试</van-button>
     <van-button @click="onShow" type="primary" color="#F53F3F " size="small">开发者资讯</van-button>
  </div>
</template>

<script>
export default {
  name: 'count-page',
  methods: {
    onShow () {
      this.$router.push('/hot')
    }
  }
}
</script>

<style lang="less" scoped>
.count-page{
.van-button{
  margin-top: 60px;
  margin-left: 20px;
}
.van-button:nth-of-type(n+5){
margin-top: 15px;
}
}

</style>
